<template>
	<view>
		<scroll-view scrollY @scrolltolower="lower" :scrollIntoView="toView" :scrollTop="scrollTop" style="height: 100%">
				<view class="scroll-view-item bc_green" id="green"></view>
				<view class="scroll-view-item bc_red" id="red"></view>
				<view class="scroll-view-item bc_yellow" id="yellow"></view>
				<view class="scroll-view-item bc_blue" id="blue"></view>
		</scroll-view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        cid: 0
    },
			};
		},
		onLoad: function(n) {myVue = this;
        myVue.getApp.page.onLoad(this, n);
    },
    onReady: function(n) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(n) {},
    onHide: function(n) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(n) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(n) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(n) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			lower: function(n) {}
		},
	}
</script>

<style scoped>

.page /deep/ .scroll-view-item {
    height: 500upx;
}

#green {
    background-color: green;
}

#red {
    background-color: red;
}

#yellow {
    background-color: yellow;
}

#blue {
    background-color: blue;
}
</style>
